<template>
	<view>
		 <uni-fab
		     :pattern="pattern"
			 :content="content"
		     horizontal="right"
		     vertical="bottom"
		     direction="horizontal"
			 @trigger="trigger"
		 ></uni-fab>
		
		<view 
		class="content-pa"
		@click="handleOutAndEdit"
		>
			<template v-if="dataLists.length <= 0">
				<view class="empty-goods">您没有添加过商品!</view>
			</template>
			
			<template v-else>
				<block v-for="(item,index) in dataLists" :key="index">
					<view class="goods-item">
						<view class="item-image">
							<image 
							:src="item.primary_img" 
							mode="aspectFill" 
							lazy-load>
							</image>
						</view>
						<view class="item-info">
							<text class="clamp title">{{ item.product_name || "" }}</text>
							<text class="attr">销售单位: {{ item.sale_unit || "无" }}</text>
							<text class="price">¥{{ item.sale_price || 0.00 }} (代购价 ¥1203)</text>
							<text class="time">{{ item.update_time | filterDate }}</text>
						</view>
					</view>
					<view class="handle">
						<view>
							<button type="primary" size="mini" data-type="edit" :data-item="item" :data-index="index">编辑</button>
						</view>
						<view>
							<button type="primary" size="mini" data-type="out" :data-item="item" :data-index="index">{{ item.publish_status===0 ? "上架" : '下架' }}</button>
						</view>
					</view>
					<view class="line"></view>
				</block>
			</template>
		</view> 
	</view>
</template>

<script>
	import { updateProductStatus } from "@/common/adminRequest.js"
	import filterTime from "@/common/filterTime.js"
	import { getProductList } from "@/common/request.js"
	export default {
		data() {
			return {
				pattern:{
					buttonColor:"#fa436a",
					selectedColor:"#fa436a"
				},
				content:[
					{
						iconPath:"/static/addProduct.png",
						text:"添加"
					}
				],
				dataLists:[]
			}
		},
		onLoad() {
			this.getProductList();
		},
		filters:{
			filterDate(val){
				let d = filterTime(val)
				return d;
			}
		},
		methods: {
			// 添加商品
			trigger(e){
				if(e.index === 0){
					uni.navigateTo({
						url: '../addProduct/addProduct'
					});
				}
			},
			async getProductList(){
				let res = await getProductList();
				this.dataLists = res.data;
			},
			// 编辑  // 上下架
			async handleOutAndEdit(e){
				let index = e.target.dataset.index,  // 索引
					item = e.target.dataset.item;  // 值
					
				if(e.target.dataset.type === "edit"){
					console.log("编辑");
				}
				if(e.target.dataset.type === "out"){
					/* 入参：
					 event.id = "5e5ccfca5d654c004d984bd3"
					 event.publish_status = 0
					 */
					let res = await updateProductStatus({
						data:{
							id:item._id,
							publish_status:item.publish_status === 0 ? 1 : 0,
						},
						isShowLoading:true
					});
					if(res.code === 0){  // 更新本地数据
						this.dataLists[index].publish_status = item.publish_status === 0 ? 1 : 0
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@mixin f-ai-jc($flex,$ai,$jc) {
		display: $flex;
		align-items: $ai;
		justify-content: $jc;
	}
	
	.empty-goods{
		width: 100%;
		height: 100%;
		font-size: 36rpx;
		color: #C0C0C0;
		@include f-ai-jc(flex,center,center);
	}
	.content-pa{
		padding: 20rpx;
	}
	.handle{
		@include f-ai-jc(flex,center,flex-end);
		button{
			margin-right: 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			background: #fa436a;
			border-radius: 0;
		}
	}
	.line{
		border: 1rpx solid #C0C0C0;
		margin-bottom: 20rpx;
	}
	.goods-item{
		@include f-ai-jc(flex,center,space-between);
		box-sizing: border-box;
		.item-image{
			margin-right: 20rpx;
			flex-shrink: 0;
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
		.item-info{
			flex: 1;
			font-size: 32rpx;
			color: #C0C0C0;
			.title{
				width: 500rpx;
				color: #303133;
			}
			text{
				display: block;
			}
		}
	}
</style>
